<template>
  
</template>
<script>
import { DomEvent } from 'leaflet'
import {
  findRealParent,
  propsBinder,
  LayerMixin,
  OptionsMixin
} from 'vue2-leaflet'
import 'leaflet.heat'

export default {
  name: 'MapHeatLayer',
  mixins: [LayerMixin, OptionsMixin],
  props: {
    // 数据
    dataList: {
      type: Array,
      default: function () {
        return []
      }
    },
    // 维度key
    latKey: {
      type: String,
      default: 'lat'
    },
    // 经度key
    lngKey: {
      type: String,
      default: 'lng'
    },
    // 数值key
    valueKey: {
      type: String,
      default: 'value'
    },
    // 其它参数配置，具体请参考  https://github.com/Leaflet/Leaflet.heat
    options: {
      type: Object,
      default () {
        return {}
      }
    }
  },
  data () {
    return {
      ready: false
    }
  },
  computed: {
    /**
     * 计算成heat需要的结构：
     * [
          [50.5, 30.5, 0.2], // lat, lng, intensity
          [50.6, 30.4, 0.5],
          ...
        ]
     */
    //

    data () {
      var arr = []
      if (this.dataList) {
        for (var i in this.dataList) {
          var obj = this.dataList[i]
          arr.push([obj[this.latKey], obj[this.lngKey], obj[this.valueKey]])
        }
      }
      return arr
    }
  },
  mounted () {
    console.log('==============mounted================');
    this.mapObject = L.heatLayer(this.data, this.options)
    DomEvent.on(this.mapObject, this.$listeners)

    propsBinder(this, this.mapObject, this.$options.props)
    this.parentContainer = findRealParent(this.$parent)
    this.parentContainer.addLayer(this, !this.visible)
    this.ready = true
    this.$nextTick(() => {
      this.$emit('ready', this.mapObject)
    })
  },
  beforeDestroy () {
    console.log('==============beforeDestroy================');
    this.parentContainer.removeLayer(this)
  },
  methods: {
    addLayer (layer, alreadyAdded) {
      if (!alreadyAdded) {
        this.mapObject.addLayer(layer.mapObject)
      }
    },
    removeLayer (layer, alreadyRemoved) {
      if (!alreadyRemoved) {
        this.mapObject.removeLayer(layer.mapObject)
      }
    }
  }
}
</script>

<style>
</style>
